<template>
  <div class="container">
    <h3>加载中国边界JSON数据</h3>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile } from 'ol/layer'
import { XYZ } from 'ol/source'
import SourceVector from 'ol/source/Vector' // 矢量数据源
import VectorLayer from 'ol/layer/Vector' // 矢量图层
import GeoJSON from 'ol/format/GeoJSON' // GeoJSON格式
import henan from '@/assets/henan.json' // 引入GeoJSON数据 
export default {
  data() {
    return {
      map: null,
      source: new SourceVector({
        features: new GeoJSON().readFeatures(henan, {
          featureProjection: 'EPSG:4326',
          dataProjection: 'EPSG:4326'
        })
      }),
      view: new View({
        projection: 'EPSG:4326',
        center: [116.397411, 39.909186], // 中心点
        zoom: 10
      })
    }
  },

  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [
          new Tile({
            source: new XYZ({
              url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
            })
          }),
          new VectorLayer({
            source: this.source
          })
        ],
        view: this.view
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 840px;
    height: 550px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 800px;
      height: 420px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>